<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动胶片</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
<style>
.filmdiv{
	margin:10px auto; width:1000px;; 
}

.filmdiv .titlediv{
	height:50px; line-height:50px;
	border-top:1px solid #E7E7E7;
	border-left:1px solid #E7E7E7;
	border-right:1px solid #E7E7E7;
}

.filmdiv .title{
	font-family: Microsoft Yahei;
	padding-left: 20px;
    height: 20px;
    font-size: 20px;
    color: #62C5AB;
}

.filmdiv .contentdiv{
	height:160px;
	border:1px solid #E7E7E7;
	position:relative;
	overflow:hidden;
}

.filmdiv ul{
	position:absolute;
	left:-230px;
	top:20px;
	height:120px;
}

.filmdiv .filmleft{
	left:10px; top:61px;background:url(../images/film/app_slide_arrow.jpg) no-repeat 7px 0;
	width:30px; height:37px; position:absolute;  cursor:pointer;
}
.filmdiv .filmleft:hover{
	background:url(../images/film/app_slide_arrow.jpg) no-repeat 7px -43px;
}

.filmdiv .filmright{
	right:10px; top:61px;background:url(../images/film/app_slide_arrow.jpg) no-repeat -18px 0;
	width:30px; height:37px; position:absolute;  cursor:pointer;
}
.filmdiv .filmright:hover{
	background:url(../images/film/app_slide_arrow.jpg) no-repeat -18px -43px;
}

</style>
<div class="filmdiv">
  <div class="titlediv">
    <h2 class="title">游戏专题</h2>
  </div>
  <div class="contentdiv">
    <a class="filmleft"></a>
    <div style="width:900px; height:500px; margin-left:50px; position:relative; overflow:hidden">
      <ul>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/1.jpg"/></a></div></li>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/2.jpg"/></a></div></li>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/3.jpg"/></a></div></li>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/4.jpg"/></a></div></li>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/5.jpg"/></a></div></li>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/6.jpg"/></a></div></li>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/7.jpg"/></a></div></li>
        <li><div style="overflow:hidden;border-radius:10px;height:120px;"><a href="http://www.baidu.com" target="_blank"><img src="../images/film/8.jpg"/></a></div></li>
      </ul>
    </div>
    <a class="filmright"></a>
  </div>
</div>
<script language="javascript">

(function(){

	var speed = 500;
	var image_width = 210;
	var image_interval = 20;
	var offset = 0;//偏移
	
	var $filmdiv = $('.filmdiv');
	var $contentdiv = $filmdiv.children('.contentdiv');
	var $ul = $contentdiv.find('ul');
	var $lis = $ul.children('li');
	var data_count = $lis.length;
	
	var datas = [];
	
	for(var i=0; i<data_count; i++){
		datas[i] = $($lis[i]).html();
	}
	
	/***
	  * 得到数组下标
	  * @param  location 共有6个位置,其中位置0为左边超出的，1~4分别为可见的1~4，位置5为右边超出的
	  * 
	  */
	var get_index = function(location){
		var index = location + offset - 1;
		index = (index%data_count<0) ? (index%data_count + data_count) : (index%data_count);
		return index;
	}
	
	var init_images = function(){

		$ul.html('');
		$ul.css('left', - image_width - image_interval);
		$ul.css('width', (image_width+image_interval)*$lis.length);//若UL不指定宽度将折行

		$ul.append($('<li>'+datas[get_index(0)]+'</li>'));
		$ul.append($('<li>'+datas[get_index(1)]+'</li>'));
		$ul.append($('<li>'+datas[get_index(2)]+'</li>'));
		$ul.append($('<li>'+datas[get_index(3)]+'</li>'));
		$ul.append($('<li>'+datas[get_index(4)]+'</li>'));
		$ul.append($('<li>'+datas[get_index(5)]+'</li>'));
		
		for(var i=0; i<$ul.children('li').length; i++){
			$ul.children('li').css('float', 'left');
			if(i==0){
				$($ul.children('li')[i]).css('margin-left', 0);
			}else{
				$($ul.children('li')[i]).css('margin-left', 20);
			}
		}

	};
	
	init_images();

	$('.filmleft').on('click', function(){				 
		$ul.animate({left:0}, speed, function() {							  
			offset--;								  
			init_images();
		});
	});
	
	$('.filmdiv .filmright').on('click', function(){				 
		$ul.animate({left:- (image_width + image_interval)*2}, speed, function() {
			offset++;								  
			init_images();
		});
	});
	
})();

</script>
</body>
</html>


